<script>
import {Setting} from "@element-plus/icons-vue";

import child from '@/views/child.vue'

export default {
  components: {Setting,child},
  data(){
    return{
      menuData:[],
    }
  },
  methods:{
    tz(url){
      this.$router.push(url);
    },
    logout(){
      // 清空sessio中的东西
      sessionStorage.clear();//
      // 后端框架里面 的用户的信息 清除
      this.$axios.get("/logout");

      this.$router.push("/login")

    },
    mqueryMenu(){
      this.$axios.get("tab-menu").then(res=>{
        this.menuData=res.data.data;

      })
    }
  },
  created() {
    this.mqueryMenu();
  }
}

</script>

<template>
  <el-container style="height: 500px; border: 1px solid #eee">
    <el-aside width="200px">
      <el-scrollbar>
<!--    开一个    -->
        <el-menu unique-opened>
          <child v-for="item in menuData" :item-data="item"></child>

<!--          <template v-for="menu in menuData" :key="menu.id" >-->
<!--          <el-sub-menu :index="menu.id+'test'" v-if="menu.childMenus.length>0">-->
<!--                          <template #title>{{ menu.mname }}</template>-->
<!--            <el-menu-item v-for="son in menu.childMenus" :key="son.id" :index="son.id+'son'"-->
<!--            @click="tz({path:son.url})"-->
<!--            >-->
<!--              {{son.mname}}-->
<!--            </el-menu-item>-->

<!--          </el-sub-menu>-->
<!--          </template>-->

        </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <div class="toolbar">
          <el-dropdown>
            <el-icon style="margin-right: 8px; margin-top: 25px">
              <setting />
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>View</el-dropdown-item>
                <el-dropdown-item>Add</el-dropdown-item>
                <el-dropdown-item><button @click="logout()">退出</button></el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <span>Tom</span>
        </div>
      </el-header>

      <el-main>
         <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>


<style scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 80px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

</style>